<template>
	<view class="fileUploadPopup">
		<view class="popupTitle">{{pageTitle}}</view>
		<view class="toptips" v-if="refuse">
			<view class="titleBlock">
				<view class="icon">
					<u-icon name="https://supply.zhongyimotor.com/upload/applet/refuse_reject_supplier@3x.png"
						width="36" height="36"></u-icon>
				</view>
				<view class="title">平台审核驳回</view>
			</view>
			<view class="content">
				{{remarks}}
			</view>
			<view class="dateTime">
				审核时间：2023/09/14 15:39:46
			</view>
		</view>
		<view class="typeList">
			<view class="name">
				合同模板
				<view class="tag">平台模板，可供参考使用</view>
			</view>
			<view class="item" v-for="(item,index) in contractList" :key="index" v-if="item.type == 0">
				<view class="icon">
					<u-icon name="https://supply.zhongyimotor.com/upload/applet/icon_contract_supplier@2x.png"
						size="76"></u-icon>
				</view>
				<view class="content">
					<view class="title">{{item.contractName}}</view>
					<view class="subTitle">合同模板</view>
				</view>
				<view class="action">
					<u-button size="mini" type="success" shape="circle" :custom-style="buttonStyleMini"
						@click="openFile(item.url)">查看模板</u-button>
				</view>
			</view>
			<view class="name">上传合同</view>
			<c-upload v-model="file" type="Array" />
			<!-- <view class="item" v-if="type == 0">
				<view class="icon">
					<u-icon name="https://supply.zhongyimotor.com/upload/applet/icon_contract_supplier@2x.png"
						size="76"></u-icon>
				</view>
				<view class="content">
					<view class="title">上传合同</view>
					<view class="subTitle">收费票据、凭证等</view>
				</view>
				<view class="action">
					<u-upload :action="action" :custom-btn="true" :max-count="maxCount" :show-upload-list="true"
						ref="uUpload" name="uploadFiles" @on-uploaded="uploadOver">
						<view slot="addBtn" class="uploadBox" hover-class="slot-btn__hover" hover-stay-time="150">
							<view class="uploadBtn">上传合同</view>
						</view>
					</u-upload>
				</view>
			</view>
			<view class="item" v-else>
				<view class="icon">
					<u-icon name="https://supply.zhongyimotor.com/upload/applet/icon_contract_supplier@2x.png"
						size="76"></u-icon>
				</view>
				<view class="content">
					<view class="title">上传合同</view>
					<view class="subTitle">收费票据、凭证等</view>
				</view>
				<view class="action">
					<u-button size="mini" type="success" shape="circle" :custom-style="buttonStyleMini">上传合同</u-button>
				</view>
			</view> -->
		</view>
		<view class="">
			<u-button type="success" shape="circle" :custom-style="buttonStyle" @click="submit">确认提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		openFile
	} from '@/utils/index.js';
	import cUpload from '@/components/c-upload/index.vue';
	import {
		buttonStyle
	} from "@/utils/buttonStyle.js";
	export default {
		components: {
			cUpload
		},
		data() {
			return {
				remarks: "",
				buttonStyleMini: {
					width: "160rpx",
					height: "60rpx",
					background: "#0FBD7F",
					color: "#FFF",
					fontSize: "28rpx"
				},
				buttonStyle,
				maxCount: 99,
				contractList: [],
				file: []
			}
		},
		props: {
			refuse: {
				type: Boolean,
				default: false
			},
			pageTitle: {
				type: String,
				default: "上传文件"
			},
			handleId: {
				type: String,
				default: ""
			}
		},
		watch: {
			handleId(newLength, oldLength) {
				this.getDetails(newLength)
			}
		},
		onLoad() {},
		onShow() {

		},
		methods: {
			openFile,
			submit() {
				let that = this;
				let params = {
					files: this.file,
					id: this.handleId
				}
				that.$api.contractUpload(params).then(res => {
					uni.showToast({
						title: '上传成功',
						icon: "success",
						duration: 2000,
						success: () => {
							setTimeout(function() {
								that.$emit('refresh');
							}, 2000)
						}
					})
				})
			},
			getDetails(handleId) {
				let that = this;
				let params = {
					id: handleId
				}
				that.$api.getSalesDetails(params).then(res => {
					that.contractList = res.result.contractList
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.fileUploadPopup {
		padding: 40rpx 0 80rpx;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}


	.typeList {
		padding: 0 40rpx;
		margin-bottom: 60rpx;

		.name {
			display: flex;
			margin: 30rpx auto;

			.tag {
				margin-left: 20rpx;
				width: 282rpx;
				height: 40rpx;
				background: #FDF7E5;
				border-radius: 20rpx;
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #F69C33;
				line-height: 40rpx;
				text-align: center;
			}
		}

		.item {
			padding: 44rpx 30rpx 44rpx 40rpx;
			width: 670rpx;
			height: 164rpx;
			background: linear-gradient(90deg, #FCFFFE 0%, #F7FFFC 100%);
			border-radius: 16rpx;
			border: 2rpx solid #0FBD7F;
			margin-top: 30rpx;
			display: flex;

			.content {
				margin-left: 20rpx;
				margin-right: auto;

				.title {
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #202020;
					line-height: 44rpx;
				}

				.subTitle {
					margin-top: 4rpx;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 36rpx;
				}
			}

			.action {
				margin-top: 8rpx;

				.uploadBox {
					.uploadBtn {
						width: 160rpx;
						height: 60rpx;
						background: #0FBD7F;
						border-radius: 30rpx;
						text-align: center;
						color: #FFF;
						line-height: 60rpx;
						font-size: 28rpx;
					}

				}

			}
		}
	}
</style>